<template>
    <div>
        <div class="header">
            <img src="../../../public/image/4.png" alt="">
        </div>
        <div class="title">
         <span>志愿者招聘</span>
         <span class="postion">您现在的位置：志愿者招聘</span>
        </div>
        <div class="search">
           <div>
               <!-- 这个div是为了控制搜索框在右边 -->
           </div>
           <div>
                职位
               <input type="text" placeholder="职位">
               工资待遇
               <input type="text" placeholder="工资待遇">
                负责人
               <input type="text" placeholder="负责人">
               <el-button slot="append" icon="el-icon-search" type="primary" size="mini">搜索</el-button>
           </div>
        </div>
        <ul class="mod-item">
         <li 
         v-for="(item,index) in list_zhiyuan" 
         :key="index"
         @click="$router.push('/zhiyuanview/zhiyuaninfo/'+item.id)"
         >
           
               <img :src="item.picture" alt="">
               <span>{{item.total}}</span>
             
         </li>
       </ul>
        <div style="margin:20px auto">
            <el-pagination
                style="text-align:center"
                layout="prev, pager, next,jumper"
                :total="total"
                :page-size="pageSize"
                background
                @current-change="current"
                >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            list_zhiyuan:[],
            pageNum:1,
            pageSize:4,
            total:0
        }
    },
    methods:{
    async getZhiYuan(pageNum,pageSize){
    let {data:res} = await this.$axios.get("/volunteer/getlist",{
        params:{
            pageNum,
            pageSize
        }
    })
    // window.console.log(res);
    this.total=res.data.total;
    this.list_zhiyuan=res.data.list;
    },
    current(e){
        // window.console.log(e);
        this.pageNum=e;
        this.getZhiYuan(this.pageNum,this.pageSize);
    },
    },
    created(){
        this.getZhiYuan(this.pageNum,this.pageSize);
    }
}
</script>
<style lang="scss" scoped>
.header{
    width: 100%;
    img{
        height: 400px;
        width: 100%;
    }
}
.title{
    width: 80%;
    margin: 10px auto;
    padding-left: 5px;
    height: 40px;
    line-height: 40px;
    border-left: 8px #666 solid;
    span{
        font-size: 15px;
        color: #000;
    }
    .postion{
            font-size: 12px;
            color: #666;
            margin-left: 30px;
        }
}
.search{
      width: 80%;
      height: 40px;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      input{
          text-align: center;
          height: 40px;
          width: 100px;
          border: none;
          border-bottom: 1px solid #000;
          outline:none;
      }
      
}
.mod-item{
      width: 80%;
    //   border: 1px solid salmon;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li{
        width: 48%;
        height: 130px;
        border: 1px #d3d7d4 solid;
        border-radius: 5px;
        box-shadow: 0 0 3px #d3d7d4;
        margin: 5px ;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img{
            // width: 130px;
            height: 130px;
        }
        span{
            display: inline-block;
            margin-right: 10px;
            position: relative;
            top: -50px;
            color: skyblue;
            font-size: 20px;
        }
      }
}
</style>